<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, div, ul, ol, dl, li, dt, dd, p, h1, h2, h3, h4, h5, h6, tr, td, input, textarea {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: pink;
        }

        ul {
            width: 900px;
            height: 63px;
            position: relative;
            margin: 100px auto;
            position: relative;
            background: #fff url("image/doubleOne.png") no-repeat right center;
        }

        li {
            float: left;
            width: 88px;
            height: 63px;
            line-height: 63px;
            text-align: center;
            position: relative;
        }

        span {
            width: 88px;
            height: 63px;
            background: url("image/tMall.png") no-repeat;
            position: absolute;
        }
    </style>
</head>
<body>
<ul id="ul">
    <span id="span"></span>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
</ul>
</body>
<script>
    window.onload = function () {
        var ul = document.querySelector('#ul');
        var span = document.querySelector('#span');
        var lis = document.getElementsByTagName('li');
        for (var i = 0; i < lis.length; i++) {
            var li = lis[i];
            li.onmouseover = function () {
                //用offset将当前(this)鼠标指向的li距离左边的距离求出来
                var Myleft = this.offsetLeft;
                //将取出来的left赋予缓动动画作为end值(end值在后面的缓动动画中创建，作为全局变量)
                end = Myleft;
            };
            //当鼠标离开的时候，将end = begin，这样动画就停留在当前位置
            //end = 0，这样动画就会马上返回第一个的位置
            li.onmouseout = function () {
                end = begin;
            };
        }
            //创建缓动动画
            var timer = null;
            var begin = 0;
            var end = 0;
            timer = setInterval(function () {
                var speed = (end - begin) * 0.1;
                begin = begin + speed;
                span.style.left = begin + 'px';
            }, 20)
    }
</script>


</html>